<template>
	<div class="hcj-main" :style="{'width': tableWidth + 'px'}">
		<!-- 表格头部 -->
		<div class="hcj-table-head" :style="{'width': tableWidth + 'px','textAlign': textAlign}">
			<div class="hcj-head-row" style="width: 60px;text-align: center;">
				序号
			</div>
			<div class="hcj-head-row" v-for="item in newHead" :style="{'width': item['width'] + 'px'}">
				{{ item['label'] }}
			</div>
		</div>
		<!-- 数据列表 -->
		<div class="hcj-table-list" :style="{'width': tableWidth + 'px','textAlign': textAlign}" v-for="(item,index) of data">
			<div class="hcj-head-row" style="width: 60px;text-align: center;">
				{{index + 1}}
			</div>
			<div class="hcj-list-row" v-for="text of newHead" :style="{'width': text['width'] + 'px'}">
				<div v-if="text.slot == true">
					<slot :name="text.prop" :data='item'></slot>
				</div>
				<div v-else style="">
					{{item[text.prop]}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		props: {
			data: {
				type: Array,
				default() {
					return []
				}
			},
			head: {
				type: Array,
				default() {
					return []
				}
			},
			textAlign: {
				type: String,
				default: "left"
			}
		},
		data() {
			return {
				tableWidth: 0,
				newHead: []
			};
		},
		methods: {},
		mounted() {
			// 构造表格头部数据
			this.head.forEach(item => {
				let tempObject = {};
				if (item.width) { //整体表格宽度
					this.tableWidth += item.width;
					this.newHead.push((item));
				} else {
					this.tableWidth += 100;
					item.width = 100; //如果表格内没有设置宽度，默认宽度为100
					this.newHead.push((item));
				}
			})
		}
	};
</script>
<style scoped>
	.hcj-main {
		border-radius: 8px;
		overflow: hidden;
		color: #505050;font-weight: 500;background-color: white;
	}
	.hcj-table-head {
		display: flex;
		text-align: center;
		border-bottom: 1px solid #eeeeee;
		background-color: #f5f5f5;
	}

	.hcj-table-list {
		display: flex;
		text-align: center;
		transition: all 0.2s;
		border-bottom: 1px solid #eeeeee;
	}

	.hcj-head-row {
		padding: 17px 9px;
	}

	.hcj-list-row {
		padding: 15px 9px;
		transition: all 0.2s;
	}
	.hcj-table-list:hover {
		background-color: #f5f5f5;
	}
	.hcj-list-row:hover {
		background-color: #f5f5f5;
	}
</style>